<!DOCTYPE HTML>
<html>
<head>
    <title>产品详情 - 二手电子乐园</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
    <div id="page-wrapper">

        <!-- Header -->
        <div id="header-container"></div>

        <!-- Main -->
        <div id="main-wrapper">
            <div class="container">
                <div class="row gtr-200" v-scope v-cloak>
                    <div class="col-8 col-12-medium" v-if="product">
                        
                        <!-- 产品标题 -->
                        <header>
                            <h2>{{ product.title }}</h2>
                            <p class="price">价格：<strong>¥{{ product.price }}</strong></p>
                        </header>

                        <!-- 产品图片 -->
                        <section>
                            <h3>产品图片</h3>
                            <div class="box">
                                <div class="row gtr-50">
                                    <div class="col-4 col-6-medium col-12-small" v-for="i in 6" :key="i">
                                        <a :href="product.image" class="image fit">
                                            <img :src="product.image + '&' + i" :alt="product.title + ' - 图片' + i" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- 产品描述 -->
                        <section>
                            <h3>产品描述</h3>
                            <div class="box">
                                <p>{{ product.description }}</p>
                            </div>
                        </section>

                        <!-- 规格参数 -->
                        <section>
                            <h3>规格参数</h3>
                            <div class="box">
                                <div class="table-wrapper">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>产品类别</td>
                                                <td>{{ getCategoryName(product.category) }}</td>
                                            </tr>
                                            <tr>
                                                <td>成色</td>
                                                <td>九成新</td>
                                            </tr>
                                            <tr>
                                                <td>购买时间</td>
                                                <td>2023年</td>
                                            </tr>
                                            <tr>
                                                <td>保修情况</td>
                                                <td>无保修</td>
                                            </tr>
                                            <tr>
                                                <td>配件情况</td>
                                                <td>原装配件齐全</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </section>

                    </div>
                    <div class="col-4 col-12-medium" v-if="product && product.seller">
                        
                        <!-- 商家信息 -->
                        <section>
                            <h3>商家信息</h3>
                            <div class="box">
                                <p><strong>联系人：</strong>{{ product.seller.name }}</p>
                                <p><strong>联系电话：</strong>{{ product.seller.phone }}</p>
                                <p><strong>所在地区：</strong>{{ product.seller.location }}</p>
                                <ul class="actions">
                                    <li><a href="login.html" class="button primary">联系卖家</a></li>
                                </ul>
                                <p><small>联系卖家前请先登录</small></p>
                            </div>
                        </section>

                        <!-- 温馨提示 -->
                        <section>
                            <h3>温馨提示</h3>
                            <div class="box">
                                <ul>
                                    <li>请当面交易，验货后再付款</li>
                                    <li>建议选择公共场所进行交易</li>
                                    <li>不要轻信低价商品，谨防诈骗</li>
                                    <li>交易前请仔细核实商品信息</li>
                                </ul>
                            </div>
                        </section>

                        <!-- 相关推荐 -->
                        <section>
                            <h3>相关推荐</h3>
                            <div class="box">
                                <div class="row gtr-50">
                                    <div class="col-12" v-for="item in relatedProducts.slice(0, 3)" :key="item.id">
                                        <a :href="'product-detail.html?id=' + item.id" class="image left">
                                            <img :src="item.image" :alt="item.title" width="100" />
                                        </a>
                                        <h4><a :href="'product-detail.html?id=' + item.id">{{ item.title }}</a></h4>
                                        <p><strong>¥{{ item.price }}</strong></p>
                                    </div>
                                </div>
                            </div>
                        </section>

                    </div>
                </div>
                
                <!-- 未找到产品提示 -->
                <div class="container" v-if="!product">
                    <header>
                        <h2>产品未找到</h2>
                        <p>抱歉，您访问的产品不存在或已下架</p>
                        <ul class="actions">
                            <li><a href="index.html" class="button">返回首页</a></li>
                            <li><a href="category.html" class="button">浏览商品</a></li>
                        </ul>
                    </header>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div id="footer-container"></div>

    </div>

    <!-- Scripts -->
    <script src="utils/loader.js"></script>
    <script>
        // 等待脚本加载完成
        window.addEventListener('scriptsLoaded', function() {
            // 加载公共组件
            $('#header-container').load('header.html');
            $('#footer-container').load('footer.html');

            // 获取产品ID
            const urlParams = new URLSearchParams(window.location.search);
            const productId = parseInt(urlParams.get('id'));

            // 查找产品
            const allProducts = [...window.siteData.featuredProducts, ...window.siteData.recommendedProducts];
            const product = allProducts.find(p => p.id === productId);

            // 获取相关产品
            const relatedProducts = allProducts.filter(p => 
                p.category === product?.category && p.id !== productId
            );

            // 初始化 petite-vue
            PetiteVue.createApp({
                product: product,
                relatedProducts: relatedProducts,
                getCategoryName: function(category) {
                    const categoryMap = {
                        'phones': '二手手机',
                        'cameras': '二手相机',
                        'digital': '二手数码',
                        'refrigerators': '二手冰箱'
                    };
                    return categoryMap[category] || '其他';
                }
            }).mount('[v-scope]');
        });
    </script>
</body>
</html>